<template>
  <!--统计图-->
  <div>
    <el-row>
      <el-card shadow="hover" style="width: 20%">
        <el-statistic style="text-align: center; " :value="data.all">
          <template #title>
            <div style="font-size: 30px;display: inline-flex; align-items: center">
              总订单量
              <el-tooltip
                  effect="dark"
                  content="客户下单的总订单量"
                  placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning/>
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
      </el-card>
    </el-row>
  </div>
  <el-row :gutter="60">
    <el-col :span="11">
      <div style="margin-top: 10px" class="static_plot">
        <el-card shadow="hover" class="box-card">
          <template #header>
            <div class="card-header">
              <span>总体订单走向</span>
            </div>
          </template>
          <div id="main" style="width: 100%;height: 350px"></div>
        </el-card>
      </div>
    </el-col>
    <el-col :span="11">
      <div style="margin-top: 10px" class="static_plot">
        <el-card shadow="hover" class="box-card">
          <template #header>
            <div class="card-header">
              <span>未付款订单</span>
            </div>
          </template>
        </el-card>
      </div>
    </el-col>
  </el-row>

</template>

<script setup>
import {ref, onMounted,} from 'vue'
import * as echarts from "echarts";
import {Analysis} from '@/api/analysis.js'

onMounted(() => {
  getAnalysisData()
  init()
})

const data = ref({}); // 初始化为一个空对象
const getAnalysisData = async () => {
  await Analysis()
      .then((res) => {
        data.value = res.data.data
        console.log(data.value)
        init(Object.values(data.value))
      })
      .catch((err) => {
        console.log(err)
      })
}
const init = (data) => {
  var myChart = echarts.init(document.getElementById('main'))
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: '订单走向'
    },
    tooltip: {},
    legend: {
      data: ['订单量']
    },
    xAxis: {
      data: ['全部', '狗', '猫', '狗粮', '猫粮']
    },
    yAxis: {type: 'value'},
    series: [
      {
        name: '订单量',
        type: 'bar',
        data: data
      }
    ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

</script>

<style scoped>

</style>